<template>
	<div class="root">
		<div class="button-group">
			<Button type="primary" @click="creatPlan">新增计划</Button>
			<Button type="primary" @click="editPlan">编辑计划</Button>
			<Button type="primary" @click="removePlan">删除计划</Button>
			<Button type="primary" @click="printingPlan">打印计划</Button>
		</div>
		<div class="content">
			<div class="con_navmeun">
				<factory-plan :planYearList="planYearList" @handleOPenChange="fhandleOPenChange"></factory-plan>
			</div>
			<div class="con_rightgroup">
				 <plan-status :planMonthObj="planMonthObj"></plan-status>
				 <div class="h10"></div>
				 <plan-month :planMonthList="planMonthList"></plan-month>
			</div>
		</div>
<!--新增-->
		<Modal v-model="create_modal" draggable scrollable >
			 <p slot="header" style="text-align:center">
	            <span>添加计划年份名称</span>
             </p>
            <div>
				<div class="marginb10">
					计划名称：<Input v-model.trim="create_form.year"  style="width: 300px;margin-left:23px;" placeholder="请输入四位数的年 时间"/>
				</div>
			    <div class="marginb10">
                    计划开始时间：
				    <DatePicker type="date" format="yyyy-MM-dd 00:00:00" v-model="create_form.startTime"  
				                @on-change="create_form.startTime=$event" style="width: 300px"></DatePicker>
			    </div>
			    <div class="marginb10">
				    计划结束时间：
				    <DatePicker type="date"   format="yyyy-MM-dd 23:59:59" v-model="create_form.endTime" 
				                @on-change="create_form.endTime=$event" style="width: 300px"></DatePicker>
			    </div>
            </div>
            <div slot="footer">
                <Button type="primary" style="width:100px" @click="createConfirm">添加</Button>
                <Button type="primary" style="width:100px" @click="createCancel">取消</Button>
            </div>
	    </Modal>
	    <Modal v-model="create_modal2" draggable scrollable width="1000">
	    	<p slot="header" style="text-align:center">
	            <span>添加<span style="color:#409eff;">{{create_form.year}}</span>计划</span>
            </p>
            <div class="marginb10">
            	 <div class="plans_title">
            	 	<div>计划开始时间</div><div>计划结束时间</div> <div>计划总产量</div><div>计划型号数量</div><div>计划完成数</div><div>达成率</div><div>状态</div>
            	 </div>
            	 <div class="plans_con">
            	 	  <div>{{create_form.startTime}}</div>
            	 	  <div>{{create_form.endTime}}</div>
            	 	  <div>{{create_form.productCount}}</div>
            	 	  <div>{{create_form.productModelCount}}</div>
            	 	  <div>{{create_form.finishedCount}}</div>
            	 	  <div>{{create_form.finishPercent}}%</div>
            	 	  <div>{{create_form.state}}</div>
            	 </div>
            </div>
            <div>
                <div class="planm_title">
                	<div>月份</div><div>开始时间</div><div>结束时间</div>
                	<div><div>产品型号</div><div>数量</div><div>操作</div></div>
                </div>
                <div class="planm_con" v-for="(item,index) in planMonths" :key="index">
                	<div>
	                	<Input v-model.Number="item.month" size="small" style="width:90%"/>
                    </div>
                	<div>
                		<DatePicker type="date" size="small" format="yyyy-MM-dd 00:00:00" v-model="item.startTime" 
				                @on-change="item.startTime=$event" style="width:90%" ></DatePicker>
				    </div>
                	<div>
                		<DatePicker type="date" size="small"  format="yyyy-MM-dd 23:59:59" v-model="item.endTime" 
				                @on-change="item.endTime=$event" style="width:90%"></DatePicker>
				    </div>
				    <div>
					    <div v-for="(items,index) in item.productPlanMonths" :key="index" class="l_four">          
					    	<div style="height:34px">
		                        <!-- <Input v-model="items.productName" size="small" style="width:90%"/> -->
		                        <el-select v-model="items.productName"  placeholder="请选择" style="width:90%;">
		                            <el-option  v-for="itemc in options"  :key="itemc.id" :label="itemc.rewirte" :value="itemc.rewirte"></el-option>
	                            </el-select>
		                	</div>
		                	<div style="height:34px">
		                		<Input v-model.Number="items.productCount" size="small"  style="width:90%"/>
		                	</div>
		                	<div>
		                    	<Icon type="md-add" size='24' @click="handleAddinput(items.year,items.month)" style="cursor: pointer;"/>
		                    	<Icon type="md-close" size='24' @click="handleCloseinput(items.year,items.month,index)" style="cursor: pointer;"/>
		                	</div>
		                </div>
                	</div>  
                </div>
            </div>
            <div slot="footer">
                <Button type="primary" style="width:100px" @click="createConfirm2">保存</Button>
                <Button type="primary" style="width:100px" @click="createCancel2">取消</Button>
            </div>
	    </Modal>
<!--编辑-->
	    <Modal v-model="edit_modal" draggable scrollable width="1000">
	    	<p slot="header" style="text-align:center;height:32px;">
	            <Input v-model="edit_form.year" placeholder="" style="width: 300px" />
	            <span style="margin-left:10px">计划</span>
            </p>
            <div class="marginb10">
            	 <div class="plans_title_edit">
            	 	<div>计划开始时间</div><div>计划结束时间</div> <div>计划总产量</div><div>计划型号数量</div><div>计划完成数</div><div>达成率</div><div>状态</div>
            	 </div>
            	 <div class="plans_con_edit">
					<div>
						<DatePicker type="date" size="small" format="yyyy-MM-dd 00:00:00" v-model="edit_form.startTime" 
						@on-change="edit_form.startTime=$event" style="width:80%" ></DatePicker>

<!-- 						<DatePicker type="date" format="yyyy-MM-dd 00:00:00" v-model="create_form.startTime"  
				                @on-change="create_form.startTime=$event" style="width: 300px"></DatePicker> -->
					</div>
					<div>
						<DatePicker type="date" size="small" format="yyyy-MM-dd 23:59:59" v-model="edit_form.endTime" 
						@on-change="edit_form.endTime=$event" style="width:90%" ></DatePicker>
					</div>
					<div>       
						<Input v-model.number="edit_form.productCount" placeholder="" size="small"  style="width: 80%" />
						<span>片</span>
					</div>
					<div>
						<Input v-model.number="edit_form.productModelCount" placeholder="" size="small" style="width:80% " />
						<span>个</span>
					</div>
					<div> 
						<Input v-model.number="edit_form.finishedCount" placeholder="" size="small"  />
						<span>片</span>
					</div> 
					<div>
						<Input v-model="edit_form.finishPercent" placeholder="" size="small" style="width: 80%" />
					</div>
					<div>
						<Input v-model="edit_form.state" placeholder="" size="small" style="width: 60%" />
					</div>  
            	 </div>
            </div>
            <div>
                <div class="planm_title">
                	<div>月份</div><div>开始时间</div><div>结束时间</div>
                	<div><div>产品型号</div><div>数量</div><div>操作</div></div>
                </div>
                <div class="planm_con" v-for="(item,index) in planMonths_edit" :key="index">
                	<div>
	                	<Input v-model.Number="item.month" size="small" style="width:90%"/>
                    </div>
                	<div>
                		<DatePicker type="date" size="small" format="yyyy-MM-dd 00:00:00" v-model="item.startTime" 
				                @on-change="item.startTime=$event" style="width:90%" ></DatePicker>
				    </div>
                	<div>
                		<DatePicker type="date" size="small"  format="yyyy-MM-dd 23:59:59" v-model="item.endTime" 
				                @on-change="item.endTime=$event" style="width:90%"></DatePicker>
				    </div>
				    <div>
					    <div v-for="(items,index) in item.productPlanMonths" :key="index" class="l_four">          
					    	<div style="height:34px">
		                        <!-- <Input v-model="items.productName" size="small" style="width:90%"/> -->
		                        <el-select v-model="items.productName"  placeholder="请选择" style="width:90%;">
		                            <el-option  v-for="itemc in options"  :key="itemc.id" :label="itemc.rewirte" :value="itemc.rewirte"></el-option>
	                            </el-select>
		                	</div>
		                	<div style="height:34px">
		                		<Input v-model.Number="items.productCount" size="small"  style="width:90%"/>
		                	</div>
		                	<div>
		                    	<Icon type="md-add" size='24' @click="handleAddEdit(items.year,items.month)" style="cursor: pointer;"/>
		                    	<Icon type="md-close" size='24' @click="handleCloseEdit(items.year,items.month,index)" style="cursor: pointer;"/>
		                	</div>
		                </div>
                	</div>  
                </div>
            </div>
            <div slot="footer">
                <Button type="primary" style="width:100px" @click="editConfirm">保存</Button>
                <Button type="primary" style="width:100px" @click="editCancel">取消</Button>
            </div>
	    </Modal>
<!--删除确认-->
	    
	</div>
</template>
<script>
import FactoryPlan from './components/factoryPlan'
import PlanStatus from './components/planStatus'
import PlanMonth from './components/planForMonth'
import * as workoutPlan from "@/api/plan/workoutPlan";
var moment = require('moment');
export default{
	components:{
       FactoryPlan,
       PlanStatus,
       PlanMonth
	},
	data () {
         return{
	    	planYearList:[],
	    	planMonthObj:{},
	    	planMonthList:[],
	    	create_modal: false,
	    	create_modal2:false,
            create_form:{},
            planMonths:[],
            options:[],
            yearId:0,
            id:0,
	    	edit_modal: false,
            edit_form:{},
            planMonths_edit:[]

        }
	},
	computed:{

	},
    methods:{
    	creatPlan (){
    		 this.create_form = {};
    		 this.planMonths = [];  
             this.create_modal = true;
    	},
    	createConfirm(){
            if(this.create_form.year == null || this.create_form.year == ''||this.create_form.year ==undefined){
             	this.$Message.warning('请输入有效的年份计划名称');
            }else if(this.create_form.startTime == null || this.create_form.endTime ==null
                   ||this.create_form.startTime == undefined || this.create_form.endTime ==undefined 
                   || this.create_form.startTime == '' || this.create_form.endTime ==''){
             	this.$Message.warning('请输入开始时间 和 结束时间');
            }else{
             	if((new Date(this.create_form.startTime))>=(new Date(this.create_form.endTime)) ){
	             	this.$Message.warning('开始时间 不能大于 结束时间');
	            }else{
                    var startM = moment(this.create_form.startTime).get('month')+1,
		                endM   = moment(this.create_form.endTime).get('month')+1,
		                startY = moment(this.create_form.startTime).get('year'),
		                endY   = moment(this.create_form.endTime).get('year');           
		            if((endY - startY) ==1){
		            	endM = endM+12;
		            }

		            for(var i=0;i<(endM-startM+1);i++){
		            	var oneMonthPlan = {month:'',endTime:'',startTime:'',productPlanMonths:[],year:''};
		            	this.planMonths.push(oneMonthPlan);
		            	this.planMonths[i].month = ((startM+i<13)?(startM+i):(startM+i-12))
		            	this.planMonths[i].year = ((startM+i<13)?(startY):(endY))
		            }	
		          		            
		            for(var j=0;j<(endM-startM+1);j++){ 
		            	var oneProductPlanMonths={ productName:'', productCount:0, endTime:'', startTime:'', month:'', year:'' } 
		            	this.planMonths[j].productPlanMonths.push(oneProductPlanMonths);
	            		this.planMonths[j].productPlanMonths[0].month = this.planMonths[j].month
		            	this.planMonths[j].productPlanMonths[0].year = this.planMonths[j].year 
		            }	   
	                this.create_modal = false;
	                this.create_modal2 = true;
	            }
            }           
    	},
    	createCancel(){
             this.create_modal = false;
             this.create_form = {};
    	},
    	createConfirm2(){
		    
	        this.create_form.planMonths = this.planMonths;
	        console.log('create',this.create_form)
	        workoutPlan.create(this.create_form).then(data =>{
	            this.create_modal2 = false;
				this.fetchData()
	            this.create_form = {}; 				
			})
    	},
    	createCancel2(){
            this.create_modal2 = false;
            this.create_form = {};
    	},

    	editPlan (){
    		this.edit_form = {}
    		this.planMonths_edit = []
    		if(this.yearId === 0){
    			this.$Message.info('请选择要更改的年计划名称');
    		}else{
                this.edit_modal = true;
                workoutPlan.update({id:this.yearId}).then(data =>{
                	// console.log('lkh111111111',data)	
                	// console.log('lkh222222222',data.msg)	
                	// console.log('lkh333333333',data.msg.endTime)	
					this.edit_form = data.msg;
                    this.planMonths_edit = data.msg.planMonths;
				}) 
    		}

    	},
    	editConfirm(){
	        var s = moment(this.edit_form.startTime).format('YYYY-MM-DD HH:mm:ss');
	        var e = moment(this.edit_form.endTime).format('YYYY-MM-DD HH:mm:ss');
	        this.edit_form.startTime = s;
	        this.edit_form.endTime = e;
	
	        var ss=[];
	        var ee=[];
	        this.planMonths_edit.forEach(function(currentValue,index){
                  ss[index] = moment(currentValue.startTime).format('YYYY-MM-DD HH:mm:ss'); 
                  currentValue.startTime = ss[index]
                  ee[index] = moment(currentValue.endTime).format('YYYY-MM-DD HH:mm:ss'); 
                  currentValue.endTime = ee[index]
	        })

	        this.edit_form.planMonths = this.planMonths_edit
	        workoutPlan.updatePost(this.edit_form).then(data =>{
				this.edit_modal = false;
				this.loadYearplan();
				this.fhandleOPenChange(this.yearId)	

			}).catch(data =>{
			})
    	},
    	editCancel(){
            this.edit_modal = false;
            this.edit_form = {};
    		this.planMonths_edit = [];
    	},
    	removePlan (){
    		if(this.yearId === 0){
    			this.$Message.info('请选择要删除的年计划名称');
    		}else{
                this.$confirm('是否删除该条数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    workoutPlan.deleteMany({ids:this.yearId}).then(data => {
                      this.fetchData();
                      this.$message({
                        type: 'success',
                        message: '删除成功!'
                      });
                    })

                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消删除'
                    });
                  });
    		}

    	},
    	printingPlan (){

    	},
    	loadYearplan(){
             workoutPlan.listPlanYear({pageSize:10,pageNum:1}).then(data => {
				this.planYearList = data.msg
			})
    	},
		fetchData() {
			workoutPlan.listPlanYear({pageSize:10,pageNum:1}).then(data => {
				this.planYearList = data.msg
				this.id = data.msg[0].id
				this.getYearPlanList(data.msg[0].id);

			})
		},
		loadProduct(){
            workoutPlan.listProduct().then(data =>{
                 this.options = data
            })
		},
		handleOpen(){

		},
		handleClose(){

		},
		handleAddinput(a,b){
			console.log(a,b);
			var productPlanMonthsCopy={ productName:'', productCount:0, endTime:'', startTime:'', month:b, year:a } 
			this.planMonths.forEach(function(currentValue,index){
				if(currentValue.year === a && currentValue.month === b){
					currentValue.productPlanMonths.push(productPlanMonthsCopy)
				}
			})
		},
		handleCloseinput(a,b,c){
			console.log(a,b,c);
			var _this = this;
			this.planMonths.forEach(function(currentValue,index){
				if(currentValue.year === a && currentValue.month === b){
					if(currentValue.productPlanMonths.length === 1){
                        _this.$Message.warning('只剩下最后一项了');
					}else{
					    currentValue.productPlanMonths.splice(c,1);
					}
				}
			})
		},
		fhandleOPenChange(id){
            this.yearId = id;
            workoutPlan.update({id:id}).then(data =>{
				this.planMonthObj = data.msg;
				this.planMonthList = data.msg.planMonths;
			}) 
				
		},
		getYearPlanList(id){
            workoutPlan.update({id:id}).then(data =>{
				this.planMonthObj = data.msg
				this.planMonthList = data.msg.planMonths;
			})
		},
		handleAddEdit(a,b){
			var productPlanMonthsCopy={ productName:'', productCount:0, endTime:'', startTime:'', month:b, year:a } 
			this.planMonths_edit.forEach(function(currentValue,index){
				if(currentValue.year === a && currentValue.month === b){
					currentValue.productPlanMonths.push(productPlanMonthsCopy)
				}
			})
		},
		handleCloseEdit(a,b,c){
			var _this = this;
			this.planMonths_edit.forEach(function(currentValue,index){
				if(currentValue.year === a && currentValue.month === b){
					if(currentValue.productPlanMonths.length === 1){
                        _this.$Message.warning('只剩下最后一项了');
					}else{
					    currentValue.productPlanMonths.splice(c,1);
					}
				}
			})
		}


    },
    created() {
		this.fetchData();
		this.loadProduct();
		
	}
}	
</script>
<style scoped>
	.root{
		
	}
	.button-group{
		margin-top: 10px;
		margin-left: 20px;
	}
	.content{
		width: 100%;
        display: flex;
        align-items: flex-start;
	}
	.content .con_navmeun{
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;
	}
	.content .con_rightgroup{
        /*background: red;*/
        flex:1; 
        margin: 10px 10px 0 10px;
        box-sizing: border-box;
	}
	.h10{
		height: 10px;
	}
	.marginb10{
		margin-bottom: 10px;
		text-align: center;
	}

/*年计划状态 表格*/
.plans_title,
.plans_con{
    width: 100%;
    height: 34px;
    display: flex;
    border:1px solid #409eff;
    box-sizing: border-box;
}

.plans_title{
    background: #409eff;
    border-bottom:1px solid #ccc;
}
.plans_con{
	border-top: none;
}
.plans_title div,
.plans_con div{
     color:#606266;
     border-right: 1px solid #ccc;
     height: 100%;
     flex:1; 
     display: flex;
     justify-content: center;
     align-items: center; 
}
.plans_title div{
	color:#fff;
	font-size:18px;
}
.plans_title div:last-child,
.plans_con div:last-child{
     border:none;
}

/*月计划表格*/
.planm_title{
	width: 100%; 
	height: 34px;
	display: flex;
	border:1px solid #409eff;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
	background: #409eff;
}
.planm_title div{
	border-right: 1px solid #ccc;
	box-sizing: border-box;
	flex:1; 
	height: 100%;
	color:#fff;
	font-size:18px;
	display: flex;
	justify-content:center;
	align-items: center;
}
.planm_title div:last-child{
	border:none;
	flex:3;
	display: flex;
	align-items: center;
}
.planm_title div:last-child>div{
    flex: 1;
}

.planm_con{
	width: 100%;
	display: flex;
	border:1px solid #409eff;
	border-top: none;
	box-sizing: border-box;
}
.planm_con>div{
	flex:1;
	border-right: 1px solid #ccc;
	color: #606266;
    box-sizing: border-box;
}
.planm_con>div:nth-child(-n+3){
	display: flex;
	justify-content: center;
	align-items: center;
	/*padding: 0 10px;*/
}
.planm_con>div:last-child{
	border-right:none;
	flex:3;
}
.l_four{
	display: flex;
}
.l_four>div{
	flex:1;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid  #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}
.l_four>div:last-child{
	 border-right:none;
	 /*display: flex;*/
	 justify-content: space-around;
	 /*align-items: center;*/
}

.l_four:last-child>div{
	border-bottom: none;
}

/*年计划状态 修改表格*/
.plans_title_edit,
.plans_con_edit{
    width: 100%;
    height: 34px;
    display: flex;
    border:1px solid #409eff;
    box-sizing: border-box;
}

.plans_title_edit{
    background: #409eff;
    border-bottom:1px solid #ccc;
}
.plans_con_edit{
	border-top: none;
}
.plans_title_edit div,
.plans_con_edit>div{
     color:#606266;
     border-right: 1px solid #ccc;
     height: 100%;
     flex:5.6; 
     display: flex;
     justify-content: center;
     align-items: center; 
}
.plans_title_edit div{
	color:#fff;
	font-size:18px;
}
.plans_title_edit div:nth-child(-n+2),
.plans_con_edit div:nth-child(-n+2){
	flex:7;
}

.plans_title_edit div,
.plans_con_edit>div{
	padding: 0 10px;
}

.plans_title_edit div:last-child,
.plans_con_edit div:last-child{
     border:none;
}
</style>